<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>月落的博客</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<link rel="stylesheet" href="css/lzpBlog-index.css">
</head>
<body >

<!--开幕式部分-->
<div id="door-left"><img src="img/朴宝英1left.jpg"></div>
<div id="door-right"><img src="img/朴宝英1right.jpg"></div>
<!--导航条部分-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="navbar-title">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#lzp-navbar" aria-expanded="false">
				<span class="sr-only">导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="##">月落的博客</a>
		</div>
		<div class="collapse navbar-collapse" id="lzp-navbar">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
				<li><a href="#">关于我</a></li>
				<li><a href="#">慢生活</a></li>
				<li><a href="#">一些诗</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">学无止境 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">HTML</a></li>
						<li><a href="#">Javasript</a></li>
						<li><a href="#">jQuery</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">CSS3</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">HTML5</a></li>
					</ul>
				</li>
				<li><a href="#" data-toggle="modal" data-target="#about-modal">关于</a></li>
			</ul>
			<form class="navbar-form navbar-right">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="请输入要搜索的内容...">
				</div>
				<button type="submit" class="btn btn-info">搜索</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">只言片语</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">留言板 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">最近的</a></li>
						<li><a href="#">很早以前的</a></li>
						<li><a href="#">随便挑选的</a></li>
						<li role="separator" class="divider"></li>
						<li><a href="#">全部的留言</a></li>
					</ul>
				</li>
			</ul>
		</div><!--折叠部分-->
	</div><!--整体navbar部分-->
</nav>
<!--轮播图部分-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- 圆点部分 -->
	<ol class="carousel-indicators">
		<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-example-generic" data-slide-to="1"></li>
		<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		<li data-target="#carousel-example-generic" data-slide-to="3"></li>
		<li data-target="#carousel-example-generic" data-slide-to="4"></li>
	</ol>

	<!-- 图片部分 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<img src="img/001.jpg" alt="..." class="imgRule">
		</div>
		<div class="item">
			<img src="img/002.jpg" alt="..." class="imgRule">
		</div>
		<div class="item">
			<img src="img/003.jpg" alt="..." class="imgRule">
		</div>
		<div class="item">
			<img src="img/004.jpg" alt="..." class="imgRule">
		</div>
		<div class="item">
			<img src="img/002.jpg" alt="..." class="imgRule">
		</div>

	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

<!--左侧固定导航部分-->
<div class="row">
	<!--左侧副导航部分-->
	<div class="col-md-3" id="sidebarMenu">
		<ul class="nav nav-pills nav-stacked " data-spy="affix" data-offset-top="0" id="fixed-menu">
			<li class="active" role="presentation"><a href="#section-1">首页</a></li>
			<li role="prosentation"><a href="#section-2">慢生活</a></li>
			<li role="presentation"><a href="#section-3">一些诗</a></li>
			<li role="presentation"><a href="#section-4">学无止境</a></li>
		</ul>
	</div>
	<div class="col-md-6">
		<h2 id="section-1">js中闭包的详细解读</h2>
		<div class="mainText">
			<p class="text1">js中闭包一直是个重点也是难点，而且面试中也经常会考核关于这个方面知识的掌握，那我们就来看看研究研究这个让人又恨又爱的闭包。</p>
			<p>要说闭包，那就不得不先说作用域这个问题了，ES6以前，js一直是只有全局作用域跟函数作用域，而没有块级作用域的概念，由此会导致出现一些不可意料的错误，比如下面这个例子：</p>
			<pre>
			var n = 1;
			function test(){
			alert(n);
			}
			test();
		</pre>
			这个会输出 n = 1,因为函数内部可以获取外部的变量。
			<pre>
			function test(){
			var n = 1;
			}
			alert(n);
		</pre>
			这个就会报错，因为函数外部是无法访问内部的变量的。（ps:声明变量要用var， 如果不用的话，不管你在哪声明这个变量，它都会是个全局变量）。比如这个：
			<pre>
			function test(){
			n = 1;
			}
			test();
			alert(n);
		</pre>
			这个就会输出1。
			那么我们怎么才能在函数外部读取到函数内部的变量呢，这个时候我们就要变通一下，用下面这个办法。<a href="jsScoping.html">readMore...</a>
		</div>



		<!--底部分页导航-->
		<nav aria-label="Page navigation">
			<ul class="pagination" id="nav-pagination">
				<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
				<li class="active"><a href="#" >1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">6</a></li>
				<li><a href="#">7</a></li>
				<li><a href="#" aria-label="next"><span aria-hidden="true">&raquo;</span></a></li>
			</ul>
		</nav>
	</div>


	<div class="col-md-3">
		<div class="news-list col-md-9" >
			<div class="page-header">
				<span class="glyphicon glyphicon-list"></span><strong>笔记</strong>
			</div>
			<div id="list-menu">
				<ul class="list-group" >
					<li><img src="img/lzpBlog-1.png" alt="">一个关于img上传显示到canvas比较有用的使用技巧<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-2.png" alt="">实现一个关于canvas里globalCompositeOperation的动画效果<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-4.png" alt="">canvas实现放大镜效果<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-4.png" alt="">js中闭包的详细解读<a href="jsScoping.html">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">canvas手写生成五角星的类<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">canvas实现球自由落体的类<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">setInterval跟requestAnimationFrame，哪个实现帧动画更好？<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">基于canvass实现2048游戏，并且适配手机端<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">js实现五子棋小游戏<a href="#">Read more...</a></li>
					<li><img src="img/lzpBlog-5.png" alt="">实现轮播图需要注意的一点事情<a href="carouselPic.html">Read more...</a></li>
				</ul>
			</div>

			<div class="page-footer">
				<div class="button-group">
					<a href="##" id="scrollUp"><span class="glyphicon glyphicon-chevron-up"></span></a>
					<a href="##" id="scrollDown"><span class="glyphicon glyphicon-chevron-down"></span></a>
				</div>
			</div>
		</div>
		<!--右侧新闻轮播图部分-->
		<div id="news-pic-carousel">
			<ul id="pic-list">
				<li><img src="img/ie-big.jpg" alt=""></li>
				<li><img src="img/safari-big.jpg" alt=""></li>
				<li><img src="img/opera-big.jpg" alt=""></li>
				<li><img src="img/chrome-big.jpg" alt=""></li>
				<li><img src="img/firefox-big.jpg" alt=""></li>
			</ul>
			<a href="##" class="leftBtn "><span class="glyphicon glyphicon-chevron-left"></span></a>
			<a href="##" class="rightBtn "><span class="glyphicon glyphicon-chevron-right"></span></a>
			<!--按钮部分-->
			<ul class="num">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</div>
</div>
<!--留言板部分-->
<div class="leaveMessage">
	<div class="Message-box">
		<h3>留言板</h3>
		<textarea name="message-" id="" cols="30" rows="6" placeholder="请输入内容..."></textarea>
		<div class="button-group">
			<button class="btn btn-warning">撤销</button>
			<button class="btn btn-primary">提交</button>
		</div>
	</div>


</div>


<!--footer部分-->
<div class="web-footer">
	<ul class="nav-footer">
		<li><a href="#">关于我</a></li>
		<li><a href="#">意见反馈</a></li>
		<li><a href="#">我的微博</a></li>
	</ul>
</div>

<!--返回顶部按钮-->
<div class="toTop">
	<a href="#"><span class="triangle-top"><span class="inner-triangle"></span></span></a>
	<a href="#" class="text-back">返回顶部</a>
</div>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/lzpBlog-index.js"></script>
</body>
</html>